<template>
   <!-- collapse属性收起导航 router属性将列表中设置的index属性当成跳转路径 -->
    
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      
      :collapse="store.state.homeview.navBool"
      
      router
    >

    <!-- 循环遍历路由数据 且判断是否有二级菜单 -->
    <template v-for="(item,index) in router.options.routes[2].children" :key="item.path">
      <!-- 含二级标签的下拉菜单 -->
      <el-sub-menu :index="item.path" v-if="item.children">
        <template #title>
          <el-icon><location /></el-icon>
          <span>{{ item.meta.title }}</span>
        </template>
        <!-- 循环遍历二级标签 -->
        <el-menu-item-group v-for="(v,i) in item.children" :key="v.path">
          <el-menu-item :index="v.path">{{ v.meta.classifyTitle }}</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <!-- 不含二级标签的 -->
      <el-menu-item :index="item.path" v-else>
        <el-icon><setting /></el-icon>
        <span>{{ item.meta.title }}</span>
      </el-menu-item>
    </template>
    </el-menu>
  
  </template>
  
  <script lang="ts" setup>
    import { ref,onMounted } from 'vue'
    import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
     } from '@element-plus/icons-vue'
    // 使用vuex
    import {useStore} from 'vuex'
    // 获取路由信息
    import {useRouter} from 'vue-router'
    
  
    const router=useRouter()
    const store=useStore()//获取store对象
  
    // 挂载时获取组合路由信息
    onMounted(()=>{
      console.log(11111,router.options.routes)//router中设置的全部路由信息
    })
    
    const handleOpen = (key: string, keyPath: string[]) => {
      console.log(key, keyPath)
    }
    const handleClose = (key: string, keyPath: string[]) => {
      console.log(key, keyPath)
    }
  </script>
  
  <style>
 
  </style>
  